<template>
	<view class="mainCss">
		<view class="titleBox">
			<view class="titleLeft">
				<img src="../../static/title/back.png" class="titleBack" @click="goBack">
			</view>
			<view class="titleText">
				<text>我的收藏</text>
			</view>
			<view class="titleRight">

			</view>
		</view>
		<view class="typeBox">
			<view class="type" :class="[type == index ? 'type1' : 'type']" v-for="(item, index) in typeList"
				:key="index" @click="tapInfo(index)">
				<text>{{item.typeName}}</text>
			</view>
		</view>
		<view class="bodyBox">
			<view class="leaseList" v-show="type == 0">
				<view class="shopBox" v-for="(item, index) in list" :key="index">
					<view class="imgBox">
						<img :src="item.FaceImage" class="img">
					</view>
					<view class="infoBox">
						<view class="">
							<text>{{ item.Address }}</text>
						</view>
						<view class="blurb">
							<text>{{ item.DistinctName }}</text>
						</view>
					</view>
					<view class="priceBox">
						<text>{{ item.TradePrice }}<text style="font-size: 12px;">元/月</text></text>
					</view>
				</view>
			</view>
			<view class="joinList" v-show="type == 1">
				<view class="shopBox" v-for="(item, index) in joinList" :key="index" @click="goDetails  ">
					<view class="imgBox">
						<img src="../../static/home/info.jpg" class="img">
					</view>
					<view class="infoBox">
						<view class="">
							<text>{{ item.title }}</text>
						</view>
						<view class="">
							<text style="font-size: 10px; color: #A8A8A8;">{{ item.introduce }}</text>
						</view>
						<view class="">
							<text style="font-size: 12px;color: #FF5F17;">投资{{ item.invest }}万元</text>
						</view>
					</view>
					<view class="priceBox">
						<view class="">
							<text style="font-weight: 600;">￥{{ item.money }}</text>
						</view>
						<view style="text-align: right;">
							<text style="font-size: 10px; color: #A8A8A8;">加盟费</text>
						</view>
					</view>
				</view>
			</view>
			<view class="partnershipList" v-show="type == 2">
				<view class="shopBox" v-for="(item, index) in partnershipList" :key="index">
					<view class="imgBox">
						<img src="../../static/home/info.jpg" class="img">
					</view>
					<view class="infoBox">
						<text>{{ item.title }}</text>
					</view>
					<view class="priceBox">
						<text>投资{{ item.money }}万元</text>
					</view>
				</view>
			</view>
			<view class="housekeeperList" v-show="type == 3">
				<view class="shopBox" v-for="(item, index) in housekeeperList" :key="index">
					<view class="imgBox">
						<img src="../../static/home/info.jpg" class="img">
					</view>
					<view class="infoBox" style="width: 75%;">
						<view class="">
							<text>{{ item.title }}</text>
						</view>
						<view class="blurb" style="font-size: 14px;">
							<text>{{ item.introduce }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				typeList: [{
					typeName: '租铺'
				}, {
					typeName: '加盟'
				}, {
					typeName: '合伙'
				}, {
					typeName: '管家'
				}],
				leaseList: [{
					title: '贰宝便利店',
					area: '吴中区木渎镇明清街1-20号',
					money: 7000,
				}, {
					title: '贰宝便利店',
					area: '吴中区木渎镇明清街1-20号',
					money: 7000,
				}],
				joinList: [{
					title: '贰宝便利店',
					introduce: '生活服务',
					money: 1000,
					invest: 2,
				}, {
					title: '贰宝便利店',
					introduce: '生活服务',
					money: 1000,
					invest: 2,
				}],
				partnershipList: [{
					title: '贰宝便利店',
					money: 2,
				}, {
					title: '贰宝便利店',
					money: 2,
				}],
				housekeeperList: [{
					title: '贰宝便利店',
					introduce: '生活服务',
				}, {
					title: '贰宝便利店',
					introduce: '生活服务',
				}],
				CollectionType:1,
				list:[]
			}
		},
		onLoad() {
			for (let i = 0; i < this.joinList.length; i++) {
				this.joinList[i].money = parseFloat(this.joinList[i].money).toFixed(2)
			}
			this.getCollectList(1)
		},
		methods: {
			// 返回
			goBack() {
				uni.navigateBack(0)
			},
			// 获取下标
			tapInfo(index) {
				this.type = index
				if(index == 0) {
					this.getCollectList(1)
				}else if(index == 1) {
					this.getCollectList(2)
				}else if(index == 2) {
					this.getCollectList(3)
				}else if(index == 3) {
					this.getCollectList(4)
				}
			},
			// 获取收藏列表
			getCollectList(type) {
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					url: 'https://ypsf.huashengzhuan.cn/Application/NewShopApi.ashx?action=getCollectList',
					method: 'POST',
					data: {
						CollectionType: type,
						OpenID:'test1',
						Page:'1',
						Limit:'10'
					},
					dataType: 'json',
					success: res => {
						// console.log(res);
						this.list = res.data
					}
				})
			},
			// 跳转到商铺介绍
			goDetails() {
				uni.navigateTo({
					url:'/pages/lease/details'
				})
			}
		}
	}
</script>

<style>
	@import '../../css/collect.css';
</style>
